{% extends 'base.html' %}
{% block self_head_css_js %}
    <link href="/static/alert/chosen.min.css" rel="stylesheet">
    <link href="/static/alert/select2.min.css" rel="stylesheet">
<style type="text/css">
.spinner {
  margin: 100px auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}
.spinner > div {
  background-color: #67CF22;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
</style>
{% endblock %}
{% block content %}

<p class="text-center">
    <a target="_blank" href="https://www.tapd.cn/20257541/markdown_wikis/#1120257541001008845" class="center-block">告警帮助文档</a>
</p>
<div class="wrapper wrapper-content animated fadeIn">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins" id="all">
                <div class="ibox-title">
                    <h5> 项目列表</h5>
                    <div class="ibox-tools">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i title="新增项目" class="fa fa-plus" onclick="addModal();return false;">新增项目</i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                    <form id="asset_form">
                        <table class="table table-striped table-bordered table-hover " id="editable">
                            <thead>
                                <tr>
                                    <th class="text-center"> 项目ID </th>
                                    <th class="text-center"> 项目名称 </th>
                                    <th class="text-center"> 项目负责人 </th>
                                    <th class="text-center"> 项目状态 </th>
                                    <th class="text-center"> </th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for info in projects %}
                                <tr class="gradeX">
                                    <td class="text-center">{{ info.id }}</td>
                                    <td class="text-center"><a href="/alert/items/?pid={{ info.id }}" title="查看监控项">{{ info.name }}</a></td>
                                    <td class="text-center">{{ info.owner_name }}</td>
                                    {% if info.state == 0 %}
                                        <td class="text-center">启用告警</td>
                                    {% else %}
                                        <td class="text-center">禁用告警</td>
                                    {% endif %}
                                    <td class="text-center">
                                        <button onclick="editModal('{{ info.id }}', '{{ info.name }}', '{{ info.owner }}', '{{ info.state }}', '{{ info.owner_name }}');return false;">编辑</button>
                                        {% if request.user.is_superuser %}
                                            <button onclick="removeProject('{{ info.id }}', '{{ info.name }}');return false;">删除</button>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

    <div id="modal-form" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" onclick="$('#modal-form').modal('hide');">&times;</button>
                    <h4 class="blue bigger">请填写项目信息:</h4>
                </div>
                <form class="form-horizontal">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xs-12 col-sm-9">
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="modal-form-name">名称：</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="clearfix">
                                            <input required type="text" id="modal-form-name" name="name" style="width:100%">
                                        </div>
                                    </div>
                                </div>
                                <div class="space-2"></div>

                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="modal-form-owner">负责人：</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="clearfix">
                                            <div class="form-ctrl form-ctrl-select">
                                                <select style="width:100%" required class="form-control" id="modal-form-owner" name="owner"></select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="space-2"></div>

                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="modal-form-state">状态：</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="clearfix">
                                            <select class="chosen-select form-control" name="state" id="modal-form-state">
                                                <option value="0" selected>启用告警</option>
                                                <option value="1">禁用告警</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="space-2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-sm btn-primary">
                            <i class="ace-icon fa fa-check"></i>
                            提交
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="modal-form-edit" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" onclick="$('#modal-form-edit').modal('hide');">&times;</button>
                    <h4 class="blue bigger">请编辑项目信息:</h4>
                </div>
                <form class="form-horizontal">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xs-12 col-sm-9">
                                <input style="display:none;" required type="text" title="id" id="modal-form-edit-id" name="id" class="col-xs-12 col-sm-10">
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="modal-form-edit-name">名称：</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="clearfix">
                                            <input required type="text" id="modal-form-edit-name" name="name" style="width:100%">
                                        </div>
                                    </div>
                                </div>
                                <div class="space-2"></div>

                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="modal-form-edit-owner">负责人：</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="clearfix">
                                            <div class="form-ctrl form-ctrl-select">
                                                <select style="width:100%;" required class="form-control" id="modal-form-edit-owner" name="owner"></select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="space-2"></div>


                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="modal-form-edit-state">状态：</label>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="clearfix">
                                            <select class="chosen-select form-control" name="state" id="modal-form-edit-state">
                                                <option value="0">启用告警</option>
                                                <option value="1">禁用告警</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="space-2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-sm btn-primary">
                            <i class="ace-icon fa fa-check"></i>
                            提交
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="modal-loading" class="modal" tabindex="-1">
        <div class="spinner">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
        </div>
    </div>
{% endblock %}

{% block self_footer_js %}
    <script src="/static/alert/bootbox.js"></script>
    <script src="/static/alert/jquery.validate.min.js"></script>
    <script src="/static/alert/chosen.jquery.min.js"></script>
    <script src="/static/alert/select2.min.js"></script>
<script type="text/javascript">
function addModal(){
    $('#modal-form').modal('show');
}
function editModal(pid, name, owner, state, owner_name){
    var opts='<option value="'+owner+'" selected>'+owner_name+'</option>';
    $('#modal-form-edit-id').val(pid);
    $('#modal-form-edit-name').val(name);
    $('#modal-form-edit-owner').html(opts).trigger('change');
    $('#modal-form-edit-state').find('option[value='+state+']').prop('selected', true).trigger('chosen:updated');
    $('#modal-form-edit').modal('show');
}
function addProject(form) {
    $('#modal-loading').modal('show');
    var fd=new FormData(form);
    $.ajax({
        url: "/alert/projects/add/",
        type: "POST",
        data: fd,
        enctype: "multipart/form-data",
        processData: false,
        contentType: false
    }).done(function (result) {
        bootbox.alert(result.errmsg, function(){
            if (result.errcode === 0) {window.location.reload();}
            else $('#modal-loading').modal('hide');
        });
    });
    return false;
}
function editProject(form) {
    $('#modal-loading').modal('show');
    var fd=new FormData(form);
    var pid=$('#modal-form-edit-id').val();
    $.ajax({
        url: "/alert/projects/edit/?pid="+pid,
        type: "POST",
        data: fd,
        enctype: "multipart/form-data",
        processData: false,
        contentType: false
    }).done(function (result) {
        bootbox.alert(result.errmsg, function(){
            if (result.errcode === 0) {window.location.reload();}
            else $('#modal-loading').modal('hide');
        });
    });
    return false;
}
{% if request.user.is_superuser %}
function removeProject(pid, name) {
    bootbox.confirm('是否删除项目: '+name+' ？', function(result){
      if (result){
        $.ajax({
            url: "/alert/projects/remove/?pid="+pid,
            type: "DELETE"
        }).done(function (result) {
            bootbox.alert(result.errmsg, function(){
                if (result.errcode === 0) {window.location.reload();}
            });
        });
      }
    });
}
{% endif %}

jQuery(function($) {
    $('#modal-form form.form-horizontal').validate({
        errorElement: 'div',
        errorClass: 'help-block',
        focusInvalid: false,
        ignore: '',
        highlight: function(e) {
            $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
        },
        success: function(e) {
            $(e).closest('.form-group').removeClass('has-error');
            $(e).remove();
        },
        errorPlacement: function(error, element) {
            if (element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                var controls = element.closest('div[class*="col-"]');
                if (controls.find(':checkbox,:radio').length > 1) controls.append(error);
                else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
            } else if (element.is('.select2')) {
                error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
            } else if (element.is('.chosen-select')) {
                error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
            } else {
                error.insertAfter(element.parent());
            }
        },
        submitHandler: function(form) {
            addProject(form);
        },
        invalidHandler: function(form) {
        }
    });
    $('#modal-form-edit form.form-horizontal').validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            ignore: '',
            highlight: function(e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },
            success: function(e) {
                $(e).closest('.form-group').removeClass('has-error');
                $(e).remove();
            },
            errorPlacement: function(error, element) {
                if (element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                    var controls = element.closest('div[class*="col-"]');
                    if (controls.find(':checkbox,:radio').length > 1) controls.append(error);
                    else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                } else if (element.is('.select2')) {
                    error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                } else if (element.is('.chosen-select')) {
                    error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                } else {
                    error.insertAfter(element.parent());
                }
            },
            submitHandler: function(form) {
                editProject(form);
            },
            invalidHandler: function(form) {
            }
        });
    $('#modal-form-owner, #modal-form-edit-owner').select2({
                placeholder: '请输入用户名查找',
                ajax: {
                    url: '{% url "search_user" %}',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {query: params.term}
                    },
                    processResults: function(data){return {results: data.users}},
                    cache: true
                },
                escapeMarkup: function (m) {return m},
                minimumInputLength: 2
            });
})
</script>
{% endblock %}
